<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录验证系统</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .container {
        width: 100%;
        display: flex;
      }

      .container .img {
        height: 100%;
        flex-grow: 1;
      }

      .container .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .form {
        flex: 1;
        min-width: 400px;
        background: white;
        border-radius: 0 15px 15px 0;
        padding: 30px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      /* .form:hover {
        transform: translateY(-5px);
      } */

      .form h2 {
        color: #3498db;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f1f1;
      }

      .form-content {
        margin-top: 20px;
      }

      .login-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      label {
        font-weight: 600;
        color: #2c3e50;
      }

      input {
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.3s;
      }

      input:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      }

      button {
        background: #3498db;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        transition: background 0.3s;
        margin-top: 10px;
      }

      button:hover {
        background: #2980b9;
      }

      .url-display {
        background: #f1f2f6;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        font-family: monospace;
        word-break: break-all;
        font-size: 0.9rem;
      }

      @media (max-width: 768px) {
        .form {
          min-width: 100%;
          border-radius: 15px;
        }

        .img {
          display: none;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="img">
        <img src="./22.png" />
      </div>
      <div class="form">
        <h2>登录页面</h2>
        <div class="form-content">
          <form class="login-form" id="loginForm">
            <div class="form-group">
              <label for="username">用户名</label>
              <input
                type="text"
                id="username"
                placeholder="输入用户名"
                required
              />
            </div>

            <div class="form-group">
              <label for="password">密码</label>
              <input
                type="password"
                id="password"
                placeholder="输入密码"
                required
              />
            </div>

            <button type="submit">登录</button>
          </form>
          <div class="url-display">URL参数将显示在这里</div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // B页面登录成功后的跳转逻辑
    function loginSuccess(params) {
      // 构建返回URL
      const returnUrl = `page_a.html?${params.toString()}`;
      // 重定向回A页面
      window.location.href = returnUrl;
    }

    // 模拟生成token
    function generateToken() {
      const chars =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      let token = "";
      for (let i = 0; i < 32; i++) {
        token += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return token;
    }

    // 解析URL参数
    function getUrlParams() {
      const params = new URLSearchParams(window.location.search);
      return Object.fromEntries(params.entries());
    }

    // 更新页面显示
    function updatePageDisplays() {
      const params = getUrlParams();

      const aUrlDisplay = document.querySelector(
        ".form:first-child .url-display"
      );

      aUrlDisplay.textContent = `URL参数: ${window.location.search || "无"}`;
    }

    // B页面登录表单提交事件
    document
      .getElementById("loginForm")
      .addEventListener("submit", function (e) {
        e.preventDefault();

        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        // 简单验证
        if (!username || !password) {
          alert("请输入用户名和密码");
          return;
        }

        // 模拟登录成功
        const token = generateToken();

        // 获取原始参数
        const params = new URLSearchParams(window.location.search);

        // 移除登录页面特有的参数
        params.delete("username");
        params.delete("password");
        params.delete("redirect");

        // 添加token参数
        params.set("token", token);

        loginSuccess(params);
      });

    // 初始化页面显示
    updatePageDisplays();
    // 监听URL变化
    window.addEventListener("popstate", updatePageDisplays);
  </script>
</html>
